.form-color-picker {
    &__title {
        // Global legend element's styles have 1rem font size as default.
        // For color picker we have to style this legend element as label size
        font-size: inherit;
    }

    // We need to hide native radio button visually but still need to have it
    // for keyboard navigation and voice over support.
    &__native-radio-control {
        width: 0;
        height: 0;
        opacity: 0;
        position: absolute;
    }

    &__radio-control {
        display: block;
        width: 2rem;
        height: 2rem;
        position: relative;
        background-color: currentColor;
        border-radius: 50%;
        cursor: pointer;

        &::before {
            content: '';
            display: block;
            width: 2.5rem;
            height: 2.5rem;
            top: 50%;
            left: 50%;
            position: absolute;
            border-radius: 50%;
            transform: translate(-50%, -50%);

            // Hide before element by default
            opacity: 0;
        }

        &:hover::before {
            opacity: 1;
            box-shadow: 0 0 0 0.05em #ffffff, 0 0 0.15em 0.1em currentColor;
        }
    }

    // Checked state
    &__native-radio-control:checked + &__radio-control {
        &::before {
            opacity: 1;
            border: solid 2px currentColor;
        }
    }

    // Focus state
    &__native-radio-control:focus + &__radio-control {
        &::before {
            opacity: 1;
            box-shadow: 0 0 0 0.05em #ffffff, 0 0 0.15em 0.1em currentColor;
        }
    }

    &__color-block {
        margin-right: 0.75rem;
    }

    &__custom-color {
        color: var(--link-color);
    }
}
